<template>
    <div class="full-name">sum:{{ sum }}</div>
    <button @click="addSum">点我加一</button>
    <hr></hr>
    <ul>
        <li v-for="(dog, index) in dogs" :key="index">
            <img :src="dog" width="200px"/>
        </li>
    </ul>
    <button @click="getDog">再来一只狗</button>
</template>

<script setup lang="ts" name="Person001">
    import useSum from '@/hooks/useSum';
    import useDog from '@/hooks/useDog';

    /* let u = useSum();
    
    console.log(u); */

    let {sum, addSum} = useSum()
    
    console.log(sum, addSum);

    let {dogs, getDog}  = useDog();
    

</script>

<style scoped>
    .full-name{
        background-color: skyblue;
        font-size: medium;
        border-radius: 5%;
        
    }
    .v1{
        background-color: rgba(58, 206, 48, 0.381);
        font-size: medium;
    }
    
</style>
